<template>
  <div class="app-container">
    <!-- 表格区域 -->
    <div slot="header" class="clearfix">
      <span class="role-span">流程配置</span>
    </div>
    <div class="table-container">
      <el-table
        highlight-current-row
        style="width: 100%;margin-top: 10px"
        :data="tableData"
        border
      >
        <!-- 所有字段均已添加到表格中 -->
        <el-table-column prop="configName" label="配置项名称" />
        <el-table-column prop="catalogName" label="是否数据主传部门自动审核" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.isBureauAuto === 0">是</span>
            <span v-if="scope.row.isBureauAuto === 1">否</span>
          </template>
        </el-table-column>
        <el-table-column label="是否数据来源部门自动审核">
          <template slot-scope="scope">
            <span v-if="scope.row.isSourceAuto === 0">是</span>
            <span v-if="scope.row.isSourceAuto === 1">否</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column prop="createBy" label="创建人" />
        <el-table-column
          label="操作"
          width="300px"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              @click="xgbtn(scope.row)"
            >修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="修改配置"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :model="editForm">
        <el-form-item label="是否数据主传部门自动审核">
          <el-radio-group v-model="editForm.isBureauAuto">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否数据来源部门自动审核">
          <el-radio-group v-model="editForm.isSourceAuto">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCatalogConfig, getCatalogConfigUpdate } from '@/api/resource/application'

export default {
  name: 'ApplicationList',
  data() {
    return {
      tableData: [],
      dialogVisible: false, // 控制对话框显示隐藏
      editForm: {
        isBureauAuto: null, // 对应是否数据主传部门自动审核字段
        isSourceAuto: null,
        id: ''
      }
    }
  },
  created() {
    this.loadTableData()
  },
  methods: {
    // 加载表格数据
    loadTableData() {
      getCatalogConfig().then(res => {
        this.tableData = res
      })
    },
    xgbtn(row) {
      this.editForm.isBureauAuto = row.isBureauAuto
      this.editForm.isSourceAuto = row.isSourceAuto
      this.editForm.id = row.id
      this.dialogVisible = true
    },
    saveEdit() {
      // 这里可以根据实际情况调用后台接口传递修改后的数据，比如假设接口名为updateCatalogConfig
      getCatalogConfigUpdate({
        // 假设接口需要传递配置项的id等必要信息以及修改后的字段值，以下是示例，需按实际调整
        id: this.editForm.id, // 假设你的数据里有id字段用于标识这条配置记录，要正确传递
        isBureauAuto: this.editForm.isBureauAuto,
        isSourceAuto: this.editForm.isSourceAuto
      }).then((res) => {
        // 关闭对话框
        this.dialogVisible = false
        // 重新加载表格数据，使修改生效
        this.$message({
          message: res,
          type: 'success'
        })
        this.loadTableData()
      }).catch(() => {
        // 处理错误情况，比如提示用户修改失败等
        this.$message.error('修改失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
